<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>商品详情</title>
		<link href="common-1.css" tppabs="http://www.xunron.cn/cases/hmshop/css/common.css" rel="stylesheet" />
		<link href="detail-1.css" tppabs="http://www.xunron.cn/cases/hmshop/css/detail.css" rel="stylesheet" />
		<!--<script src="js/jquery-1.12.4.min.js"></script>-->
		<script  src="jquery-1.12.4.min.js" tppabs="http://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script src="load-1.js" tppabs="http://www.xunron.cn/cases/hmshop/js/load.js"></script>
	</head>
	<body>
		<header>
			<script>
				$('header').load('header.php.htm'/*tpa=http://www.xunron.cn/cases/hmshop/header.php*/);
			</script>
		</header>
		<section id="main">
			<!--左侧导航/banner-->
			<div class="menu hidden over">
				<h2 class="menu_over">
					&nbsp;
				</h2>
				<ul class="menu_list">
					<li>
							<span>
								<i class="icon_phone"></i>
								<a href="javascript:;">手机通讯</a>/<a href="javascript:;">手机配件</a>
							</span>
							<div class="menu_content">
							</div>
						</li>
						<li>
							<span>
								<i class="icon_pad"></i>
								<a href="javascript:;">笔记本</a>/<a href="javascript:;">平板</a>/<a href="javascript:;">品牌整机</a>
							</span>
							<div class="menu_content">
							</div>
						</li>
						<li>
							<span>
								<i class="icon_camera"></i>
								<a href="javascript:;">摄影摄像</a>/<a href="javascript:;">相机配件</a>
							</span>
							<div class="menu_content">
							</div>
						</li>
						<li>
							<span>
								<i class="icon_game"></i>
								<a href="javascript:;">游戏电玩</a>/<a href="javascript:;">游戏本</a>
							</span>
							<div class="menu_content">
							</div>
						</li>
						<li>
							<span>
								<i class="icon_screen"></i>
								<a href="javascript:;">DIY硬件</a>/<a href="javascript:;">外设配件</a>
							</span>
							<div class="menu_content">
							</div>
						</li>
						<li>
							<span>
								<i class="icon_watch"></i>
								<a href="javascript:;">智能生活</a>/<a href="javascript:;">数码配件</a>
							</span>
							<div class="menu_content">
							</div>
						</li>
						<li>
							<span>
								<i class="icon_print"></i>
								<a href="javascript:;">家庭影音</a>/<a href="javascript:;">办公设备</a>
							</span>
							<div class="menu_content">
							</div>
						</li>
						<li>
							<span class="last">
								<i class="icon_tv"></i>
								<a href="javascript:;">生活家电</a>/<a href="javascript:;">个护</a>
							</span>
							<div class="menu_content">
							</div>
						</li>
				</ul>
			</div>
			<div class="sub_navbar">
				<a href="javascript:;">首页</a>
				<b></b>
				<a href="javascript:;">手机</a>
				<b></b>
				<a href="javascript:;">小米</a>
			</div>
			<!--产品介绍-->
		    <div class="product-show">
				<div class="product-show-imgs">
					<div class="show-img">
						<img src="show-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/show.jpg" />
						<div id="mask"></div>
						<div id="supMask"></div>
					</div>
					<div id="largeMask">
						<img src="show-l-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/show-l.jpg" alt="" />
					</div>
					<div class="show-img-list">
						<!--<span class="button-prev"></span>-->
						<ul>
							<li class="hover"><img src="show-m-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/show-m.jpg" /></li>
						</ul>
						<!--<span class="button-next"></span>-->
					</div>
				</div>
				<div class="product-show-details">
					<div class="product-title">
						<h2>小米 4C（标准版/全网通） 好价来袭！</h2>
						<p>2GB+16GB，高通骁龙808畅销机，64位处理器，5英寸高清屏幕，红外遥控功能，双击唤醒，边缘手势识别</p>
					</div>
					<div class="show-dedails">
						<div>
							<span>优惠价：</span>
							<strong>¥799</strong><a href="javascript:;">(降价通知)</a>
						</div>
						<div>
							<span>商品编号：</span>
							960148
						</div>
						<div>
							<span>商品评分：</span>
							<i class="star star5"></i><a href="javascript:;">(已有56987人评价)</a>
						</div>
						<div>
							<span>配送至：</span>
							<div class="addr">
								<div class="btn-addr">北京海淀区大钟寺<i class="down"></i></div>
								<div class="addr-list">
									<div class="addr-list-tab">
										<a href="javascript:;" class="tab-on">北京</a>
										<a href="javascript:;">海淀区</a>
										<a href="javascript:;">三环以内</a>
									</div>
									<ul>
										<li><a href="javascript:;">北京</a></li>
										<li><a href="javascript:;">上海</a></li>
										<li><a href="javascript:;">天津</a></li>
										<li><a href="javascript:;">重庆</a></li>
										<li><a href="javascript:;">北京</a></li>
										<li><a href="javascript:;">上海</a></li>
										<li><a href="javascript:;">天津</a></li>
										<li><a href="javascript:;">重庆</a></li>
										<li><a href="javascript:;">北京</a></li>
										<li><a href="javascript:;">上海</a></li>
										<li><a href="javascript:;">天津</a></li>
										<li><a href="javascript:;">重庆</a></li>
										<li><a href="javascript:;">北京</a></li>
										<li><a href="javascript:;">上海</a></li>
										<li><a href="javascript:;">天津</a></li>
										<li><a href="javascript:;">重庆</a></li>
										<li><a href="javascript:;">北京</a></li>
										<li><a href="javascript:;">上海</a></li>
										<li><a href="javascript:;">天津</a></li>
										<li><a href="javascript:;">重庆</a></li>
										<li><a href="javascript:;">重庆</a></li>
									</ul>
								</div>
							</div>
							<b>可送达</b>，<b>顺丰包邮</b></a>
						</div>
						<div>
							<span>商品编号：</span>
							<img src="show_server-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/show_server.jpg"  />
						</div>
						<hr />
						<div class="h">
							<span>颜色类别：</span>
							<ul>
								<li class="product-type type-on">
									行货白色8G<i class="type-on-img"></i>
								</li>
								<li class="product-type">
									行货白色16G<i></i>
								</li>
							</ul>
						</div>
						<div class="h">
							<span>套装：</span>
							<ul>
								<li class="product-type type-on">
									官方标配<i class="type-on-img"></i>
								</li>
							</ul>
							<p>数据线+充电器+保修卡</p>
						</div>
						<div class="h">
							<span>购买数量：</span>
							<button id="btn-cut" onClick="cut()">-</button><input type="text" name="number" value="1" id="payNum" /><button id="btn-add" onClick="add()">+</button>
						</div>
						<div >
							<span>&nbsp;</span><input type="button" name="payadd" value="立即购买" class="btn-payadd" />
							<input type="button" value="加入购物车" class="btn-saveadd" />
						</div>
					</div>
				</div>
		   </div>
		    <div class="detail-content">
				<!--左边栏相关分类-->
				<div class="slidebar">
					<div class="slider-box">
						<h3 class="slider-box-title">相关品牌</h3>
						<ul class="fenlei-link">
							<li><a href="javascript:;">小米</a></li>
							<li><a href="javascript:;">华为</a></li>
							<li><a href="javascript:;">魅族</a></li>
							<li><a href="javascript:;">联想</a></li>
							<li><a href="javascript:;">OPPO</a></li>
							<li><a href="javascript:;">VIVO</a></li>
							<li><a href="javascript:;">苹果</a></li>
						</ul>
					</div>
					<!--左边栏最终购买-->
					<div class="slider-box">
						<h3 class="slider-box-title">浏览了该商品的用户最终购买</h3>
						<ul class="payed-show">
							<li>
								<a href="javascript:;"><img src="other_01-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/other_01.jpg" /></a>
								<a href="javascript:;"><h4>魅族 魅蓝note3(全网通)</h4></a>
								<p>￥959</p>
							</li>
							<li>
								<a href="javascript:;"><img src="other_02-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/other_02.jpg" /></a>
								<a href="javascript:;"><h4>三星GAXLAY C5 新品现货</h4></a>
								<p>￥2198</p>
							</li>
							<li>
								<a href="javascript:;"><img src="other_03-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/other_03.jpg" /></a>
								<a href="javascript:;"><h4>三星GAXLAY S7 (全网通)定金预约</h4></a>
								<p>￥50</p>
							</li>
							<li class="last">
								<a href="javascript:;"><img src="other_04-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/other_04.jpg" /></a>
								<a href="javascript:;"><h4>魅族 魅蓝3(全网通)三色现货</h4></a>
								<p>￥669</p>
							</li>
						</ul>
					</div>
					<!--左边栏图片-->
					<ul class="adimg-list">
						<li>
							<a href="javascript:;"><img src="left_p001-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/left_p001.jpg" /></a>
						</li>
						<li>
							<a href="javascript:;"><img src="left_p002-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/left_p002.jpg" /></a>
						</li>
						<li>
							<a href="javascript:;"><img src="left_p003-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/left_p003.jpg" /></a>
						</li>
					</ul>
				</div>
				<!--右侧主体内容-->
				<div class="product-content">
					<!--商品介绍tab-->
					<div class="content-box-title">
						<ul class="content-box-tab">
							<li class="tab-on"><span>商品介绍</span></li>
							<li><span>规格参数</span></li>
							<li><span>成交记录</span></li>
							<li><span>商品评价(<strong>3</strong>)</span></li>
							<li><span>售后保障</span></li>
						</ul>
					</div>
					<div class="content_info">
						<!--商品图文介绍-->
						<div class="content-box-type">
							<ul>
								<li>官方标配：<span>数据线+充电器+保修卡</span></li>
							</ul>
							<div class="clear"></div>
						</div>
						<!--商品介绍-->
						<div class="sevice-title" id="pro-show">
                            <span class="title">商品介绍</span>
                            <span class="english-title">Products</span>
                        </div>
						<div class="product-info" id="product-info">
							<div class="type-info">
								<p>
									<img src="product_01-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/product_01.jpg" />
								</p>
								<!--<h2>产品特色 <span>Selling Point</span></h2>-->
								<p>
									<img src="product_02-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/product_02.jpg" />
								</p>
								<p>
									<img src="product_03-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/product_03.jpg" />
								</p>
								<p>
									<img src="product_04-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/product_04.jpg" />
								</p>
								<p>
									<img src="product_05-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/product_05.jpg" />
								</p>
								<p>
									<img src="product_06-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/product_06.jpg" />
								</p>
								<p>
									<img src="product_04-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/product_04.jpg" />
								</p>
								<p>
									<img src="product_08-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/product_08.jpg" />
								</p>
							</div>
						</div>
						<!--48小时发货-->
						<div class="sevice-title" id="pro-hour">
                            <span class="title">48小时发货</span>
                            <span class="english-title">48 Hours</span>
                        </div>
						<div class="product-size">
							<div class="product-shengming" id="product-shengming">
								<div>
									<h4>1、赔付保障权益</h4>
									<p>如您的收货地址在商家承诺的服务区域内，商家承诺在下单后的48小时内将商品发出，从您下单时间开始计算，如超时未发出，您可根据ZOL商城“先行赔付”进行维权、获得赔偿。</p>
								</div>
								<div>
									<h4 >2、如何跟踪配送信息</h4>
									<p>配送信息可直接在您购买的商品订单中查看。或直接与卖家联系确认。您可以在商品详细页面查看入驻卖家联系信息，订单状态变为"已发货"后，点击查询"物流状态"即可查询到您所购买的商品的在途情况。或请您点击对应的物流承运商网站进行查询，快递单号可以登陆ZOL商城账号的订单管理中获取，建议发货后48小时后进行查询。</p>
								</div>
							</div>
						</div>
						<!--发票保障-->
						<div class="sevice-title" id="pro-fapiao">
                            <span class="title">发票保障</span>
                            <span class="english-title">Invoice</span>
                        </div>
						<div class="product-size">
							<!--商品声明-->
							<div class="product-shengming" id="product-shengming">
								<div>
									<h4>发票的开具</h4>
									<p>1. 个人及不具有一般纳税人资格的企业客户，均开具普通发票 <br/>
									2. 开具普通发票时，抬头默认为收货人"个人姓名"，请需要更改抬头的客户在修改信息中进行修改。 <br/>
									3. 普通发票信息与您输入的信息一致的情况下，发票一经开出，恕不退换。</p>
								</div>
							</div>
						</div>
						<!--签收与验货-->
						<div class="sevice-title" id="pro-confirm">
                            <span class="title">签收与验货</span>
                            <span class="english-title">Receipt and inspection</span>
                        </div>
						<div class="product-size">
							<!--商品声明-->
							<div class="product-shengming" id="product-shengming">
								<div>
									<img src="img-2-1.jpg" tppabs="http://www.xunron.cn/cases/hmshop/images/product/img-2.jpg" />								</div>
							</div>
						</div>
						<!--售后服务-->
						<div class="sevice-title" id="pro-service">
                            <span class="title">售后服务</span>
                            <span class="english-title">After-sales Service</span>
                        </div>
						<div class="product-size">
							<!--商品声明-->
							<div class="product-shengming" id="product-shengming">
								<div>
									<h4 class="sm">内容声明</h4>
									<p>商城为第三方交易平台及互联网信息服务提供者，商城（含网站、移动端等）所展示的商品的标题、价格、详情等信息内容系由店铺经营者发布，其真实性、准确性和合法性均由店铺经营者负责。商城提醒用户购买商品前注意谨慎核实。如用户对商品的标题、价格、详情等任何信息有任何疑问的，请在购买前与店铺经营者沟通确认；商城存在海量店铺，如用户发现店铺内有任何违法/侵权信息，请立即向商城举报并提供有效线索。</p>
								</div>
								<div>
									<h4 class="sm">权利声明</h4>
									<p>注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！</p>
								</div>
							</div>
						</div>
						<!--商品评价-->
						<div class="content-box" id="product-comment">
							<h3 class="content-box-title">商品评价</h3>
							<div class="product-comment">
								<div class="comment-left">
									<div class="haopin">
										<span><b>97</b>%</span>
										<p>好评度</p>
									</div>
									<div class="haopinlu">
										<p>
											<span>好评(<strong>97</strong>%)</span>
											<b><i class="hp"></i></b>
										</p>
										<p>
											<span>中评(<strong>2</strong>%)</span>
											<b><i class="zp"></i></b>
										</p>
										<p>
											<span>差评(<strong>1</strong>%)</span>
											<b><i class="cp"></i></b>
										</p>
									</div>
								</div>
								<div class="comment-center">
									<p>买家印象：</p>
									<ul>
										<li>比超市便宜<span>(8450)</span></li>
										<li>味道不错<span>(8450)</span></li>
										<li>质量不错<span>(8450)</span></li>
										<li>比超市便宜<span>(8450)</span></li>
										<li>味道不错<span>(8450)</span></li>
										<li>质量不错<span>(8450)</span></li>
									</ul>
								</div>
								
							</div>
						</div>
						
						<!--评价、交易记录、咨询-->
						<div class="product-services" id="product-services">
							<!--商品评价-->
							<div class="floor_head">
								<h3 class="title">商品评价(<span>0</span>)</h3>
								<div class="decoration">
									<span><input type="radio" name="pj" value="all" checked/>全部评价</span>
									<span><input type="radio" name="pj" value="good" />好评</span>
									<span><input type="radio" name="pj" value="center" />中评</span>
									<span><input type="radio" name="pj" value="bad" />差评</span>
								</div>
							</div>
							<div class="product_pj">
								新品上架，暂未有人评价过，<a href="javascript:;">返回顶部</a>看看商品怎么样。
							</div>
							<!--交易记录-->
							<div class="floor_head">
								<h3 class="title">成交记录(<span>0</span>)</h3>
								<div class="decoration">
									<span><input type="radio" name="jy" value="30" checked/>30天成交记录(<b>0</b>件)</span>
									<span><input type="radio" name="jy" value="all" />累计成交记录(<b>3</b>件)</span>
								</div>
							</div>
							<div class="product_jy">
								<table class="jydata_list">
									<thead>
										<tr>
											<th>买家</th>
											<th>款式和型号</th>
											<th>数量</th>
											<th>成交时间</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>zol****11q5d84885</td>
											<td>
												<p>小米 4C（标准版/全网通）</p>
												<p>官方标配：白色</p>
											</td>
											<td>1</td>
											<td>2016-01-04 10:39:07成交</td>
										</tr>
										<tr>
											<td>m3j****</td>
											<td>
												<p>小米 4C（标准版/全网通）</p>
												<p>官方标配：白色</p>
											</td>
											<td>1</td>
											<td>2015-10-16 18:51:27成交</td>
										</tr>
										<tr>
											<td>qq_****467446</td>
											<td>
												<p>小米 4C（标准版/全网通）</p>
												<p>官方标配：白色</p>
											</td>
											<td>1</td>
											<td>2015-10-12 22:52:21成交</td>
										</tr>
									</tbody>
								</table>
							</div>
							<!--留言咨询-->
							
							<div class="floor_head">
								<h3 class="title">留言咨询(<span>3</span>)</h3>
								<div class="decoration">
									<span><input type="radio" name="zx" value="all" checked/>全部咨询</span>
									<span><input type="radio" name="zx" value="product" />商品咨询</span>
									<span><input type="radio" name="zx" value="pay" />支付问题</span>
									<span><input type="radio" name="zx" value="service" />发票及保修</span>
									<span><input type="radio" name="zx" value="other" />其它</span>
								</div>
							</div>
							<div class="gmzx">
								<div class="gmzx-comment">
									<p class="list1">
										<span>网&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;友：</span>
										<span class="name">135****-p</span><span>2014-11-23 11:24</span>
									</p>
									<p class="list2">
										<span>内容咨询：</span>
										<span>怎么购买?</span>
									</p>
									<p class="list3">
										<span>客服回复：</span>
										<span>您好，请与客服联系，感谢您的支持!</span>
										<span class="time">2014-11-23 15:49</span>
									</p>
								</div>
								<div class="gmzx-comment">
									<p class="list1">
										<span>网&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;友：</span>
										<span class="name">135****-p</span><span>2014-11-23 11:24</span>
									</p>
									<p class="list2">
										<span>内容咨询：</span>
										<span>怎么购买?</span>
									</p>
									<p class="list3">
										<span>客服回复：</span>
										<span>您好，请与客服联系，感谢您的支持!</span>
										<span class="time">2014-11-23 15:49</span>
									</p>
								</div>
								<div class="gmzx-comment">
									<p class="list1">
										<span>网&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;友：</span>
										<span class="name">135****-p</span><span>2014-11-23 11:24</span>
									</p>
									<p class="list2">
										<span>内容咨询：</span>
										<span>怎么购买?</span>
									</p>
									<p class="list3">
										<span>客服回复：</span>
										<span>您好，请与客服联系，感谢您的支持!</span>
										<span class="time">2014-11-23 15:49</span>
									</p>
								</div>
								<div class="gmzx-comment-foot">
									购买之前，如有问题请咨询 <a href="javascript:;" class="btn-zx">流言咨询</a>，或<a href="javascript:;">[发表咨询]</a>
									<span class="fr">共<b>101</b>条 <a href="javascript:;">浏览所有咨询&gt;&gt;</a></span>
								</div>
							</div>
						</div>
					</div>
					<div class="content_slide">
						<div class="quick_main">
							<input type="button" class="product_pay" value="立即购买" />
							<ul class="quick_menu">
								<li class="hover"><a href="#pro-show">商品介绍</a></li>
								<li><a href="#pro-hour">48小时发货</a></li>
								<li><a href="#pro-fapiao">发票保障</a></li>
								<li><a href="#pro-confirm">验收与验货</a></li>
								<li><a href="#pro-service">售后服务</a></li>
								<li><a href="javascript:;">服务详情</a></li>
							</ul>
						</div>
					</div>
				</div>
		   </div>
		   
		</section>
		<footer>
			<script>
				$('footer').load('footer.php.htm'/*tpa=http://www.xunron.cn/cases/hmshop/footer.php*/);
			</script>
		</footer>
		<script>
			$(function(){
				//送货地址
				$(".btn-addr").click(function(){
					$(this).toggleClass("btn-addr-on");
					$(this).siblings("div").toggle();
				});
				$(".addr-list-tab a").click(function(){
					$(this).addClass("tab-on").siblings().removeClass("tab-on");
				});
				//产品类型
				$(".product-type").click(function(){
					$(this).addClass("type-on").siblings().removeClass("type-on");
				});
				//标签页Tab
				$(".content-box-tab li").click(function(){
					$(this).addClass("tab-on").siblings().removeClass("tab-on");
				});
				
				//快速导航
				var qmtop=$('.quick_main').offset().top;
				$(window).bind('scroll',function(){
					var top=$(document).scrollTop();
					var t=top-10-$('.quick_menu').height()/2;
					if(t>=qmtop){
						$('.quick_main').css('top',t-qmtop-40+'px');
						$('.product_pay').css('display','block');
					}else{
						$('.quick_main').css('top','');
						$('.product_pay').css('display','');
					}
				});
				$('.quick_menu').on('click','li',function(){
					$(this).addClass('hover').siblings().removeClass('hover');
				});
			});
			//js设定增减数量
			function cut(){
				var num=payNum.value;
				if(num>1){
					num--;
				}
				payNum.value=num;
			}
			function add(){
				var num=payNum.value;
				num++;
				payNum.value=num;
			}
		</script>
		<script src="ImgShow-1.js" tppabs="http://www.xunron.cn/cases/hmshop/js/ImgShow.js"></script>
	</body>
</html>
